<template>
    <div>





<el-card style="width: 100%; height: 100vh;">

 <el-form style="margin-top: 20px" :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="货品编码:">
      <el-input v-model="formInline.Itemid"  placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="货品名称:">
      <el-input v-model="formInline.Itemname" placeholder="请输入" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
       <el-button type="success" @click="addorupdate(null)">添加</el-button>
    </el-form-item>
  </el-form>

      <el-table :data="tableData" border style="width: 100%;height: 700px;margin-top: 20px;">
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column prop="itemid" label="货品编号"/>
        <el-table-column prop="itemname" label="货品名称" />
    <el-table-column prop="satus" label="状态"  />
        <el-table-column prop="itemtypeName" label="货品类型" />
    <el-table-column prop="itemspec" label="规格型号"  />
        <el-table-column prop="unitName" label="单位"  />
    <el-table-column prop="entName" label="供应商"  />
        <el-table-column prop="clientName" label="客户名称"  />
    <el-table-column prop="purchaseprice" label="入库参考单价/元" />
        <el-table-column prop="outboundprice" label="出库参考单价/元" />
    <el-table-column label="操作" width="180">
      <template v-slot="cz">
        <el-button type="success" @click="addorupdate(cz.row)">编辑</el-button>
        <el-button type="danger" @click="ditem(cz.row.itemid)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

<el-pagination
style="float: right;"
      v-model:current-page="pagedata.index"
      v-model:page-size="pagedata.size"
      :page-sizes="[10, 20, 30, 40]"
      :size="size"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagedata.totalcount"
    />
</el-card>
    </div>

<el-dialog v-model="dialogFormVisible" title="货品"  width="500">
   
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
  >
    <el-form-item label="货品编号" prop="itemid">
      <el-input v-model="ruleForm.itemid" disabled placeholder="系统自动获取"/>
    </el-form-item>
        <el-form-item label="货品名称" prop="itemname">
      <el-input v-model="ruleForm.itemname" />
    </el-form-item>
    <el-form-item label="货品类型" prop="itemtypeid">
      <el-select v-model="ruleForm.itemtypeid" placeholder="请选择">
        <el-option v-for="t in itemytpe" :label="t.itemtypename" :value="t.itemtypeid" />
      </el-select>
    </el-form-item>
     <el-form-item label="货品单位" prop="unitid">
      <el-select v-model="ruleForm.unitid" placeholder="请选择">
        <el-option v-for="u in unit" :label="u.unitName" :value="u.unitId" />
      </el-select>
    </el-form-item>
    <el-form-item label="规格型号" prop="itemspec">
      <el-input v-model="ruleForm.itemspec" />
    </el-form-item>
    <el-form-item label="供应商" prop="entid">
      <el-select v-model="ruleForm.entid" placeholder="请选择">
        <el-option v-for="e in ent" :label="e.entname" :value="e.entid" />
      </el-select>
    </el-form-item>
        <el-form-item label="客户" prop="clientid">
      <el-select v-model="ruleForm.clientid" placeholder="请选择">
        <el-option v-for="c in client" :label="c.clientname" :value="c.clientid" />
      </el-select>
    </el-form-item>
        <el-form-item label="入库参考价/元" prop="purchaseprice">
      <el-input v-model="ruleForm.purchaseprice" />
    </el-form-item>
            <el-form-item label="出库参考价/元" prop="outboundprice">
      <el-input v-model="ruleForm.outboundprice" />
    </el-form-item>
    <el-form-item label="状态" prop="satus">
      <el-radio-group v-model="ruleForm.satus">
        <el-radio :value=1>启用</el-radio>
        <el-radio :value=0>停用</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item style="margin-left: 330px;">
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        保存
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>

  </el-dialog>

</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, reactive, ref, watch } from 'vue';

const dialogFormVisible = ref(false)
onMounted(()=>{
    getitem();
    getent();
    getclient();
    getitemtype();
    getunit();
})

const tableData = ref([{
     "itemid": "",
      "itemname": "",
      "satus": null,
      "itemtypeid": "",
      "itemtypeName": "",
      "itemspec": "",
      "unitid": "",
      "unitName": "",
      "entid": "",
      "entName": "",
      "clientid": "",
      "clientName": "",
      "purchaseprice": null,
      "outboundprice": null,
      "lastModificationTime": null,
      "lastModifierId": null,
      "creationTime": "",
      "creatorId": null,
      "id": ""
}])

const getitem=()=>{
    axios.get("api/app/item/page?pageIndex="+1+"&pageSize="+10+"&Itemid="+formInline.Itemid+"&Itemname="+formInline.Itemname).then(res=>{
        tableData.value=res.data.pageData;
        pagedata.value.totalcount=res.data.totalCount;
        pagedata.value.totalpage=res.data.totalPages;
    })
}

const formInline = reactive({
  Itemid: '',
  Itemname: ''
})

const onSubmit = () => {
  getitem();
}

const ditem=(id:any)=>{
if(confirm("确认删除吗？")){
axios.delete("/api/app/item?itemid="+id).then(res=>{
  ElMessage.success("删除成功")
  getitem();
})
}
}

import {  ElMessage, type ComponentSize } from 'element-plus'

const pagedata=ref({
    index:1,
    size:10,
    totalpage:1,
    totalcount:1
})

const AoU=ref(false)
const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)
watch(pagedata.value,()=>{getitem()},{deep:true})

const addorupdate=(i:any)=>{
  AoU.value=false
    if(i!=null){
    ruleForm.value=i;
    AoU.value=true
    }
    dialogFormVisible.value=true
}



import type { FormInstance, FormRules } from 'element-plus'



const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
  "id": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
  "creationTime": "2025-08-01T02:37:32.583Z",
  "creatorId": "3fa85f64-5717-4562-b3fc-2c963f66afa5",
  "lastModificationTime": "",
  "lastModifierId": "",
  "itemid": "",
  "itemname": "",
  "satus": 1,
  "itemtypeid": "",
  "itemspec": "",
  "unitid": "",
  "entid": "",
  "clientid": "",
  "purchaseprice": null,
  "outboundprice": null
})


const rules = reactive<FormRules>({
  itemname: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
  itemtypeid: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
  itemspec: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
    entid: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
    clientid: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
      unitid: [
    {
      required: true,
      message: '请选择',
      trigger: 'change',
    },
  ],
    purchaseprice: [
    { required: true, message: '请输入', trigger: 'blur' },
  ],
    outboundprice: [
    { required: true, message: '请输入', trigger: 'blur' },
  ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if(AoU.value==true){
        axios.put("/api/app/item",ruleForm.value).then(res=>{
          ElMessage.success(res.data.message)
          getitem();
          dialogFormVisible.value=false
          resetForm;
        })
      }else{
        a();
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}



const itemytpe=ref([{
  itemtypeid: "",
  itemtypename: ""
}])

const ent=ref([{
  entid:'',
  entname:''
}])

const client=ref([{
  clientid: "",
  clientname: ""
}])
const unit=ref([{
  unitId: "",
  unitName: "",
}])

const getitemtype=()=>{
  axios.get("api/app/item/item-type").then(res=>{
    itemytpe.value=res.data.data;
  })
}
const getent=()=>{
  axios.get("api/app/order-form/ent").then(res=>{
    ent.value=res.data.data;
  })
}
const getclient=()=>{
    axios.get("api/app/item/client").then(res=>{
    client.value=res.data.data;
  })
}
const getunit=()=>{
    axios.get("api/goods-management/units").then(res=>{
    unit.value=res.data.pageData;
  })
}

       const a=async()=>{
       await axios.post("api/app/dm_Encoderule/start-code?Formtypeid="+"货品信息").then(res=>{
          ruleForm.value.itemid=res.data.data;
          axios.post("/api/app/item",ruleForm.value).then(res=>{
          ElMessage.success(res.data.message)
          getitem()
          dialogFormVisible.value=false
          resetForm;
        })
        })
       } 
</script>



<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>